﻿<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">

<link href="/crm/jquery/bootstrap_3.3.0/css/bootstrap.min.css" type="text/css" rel="stylesheet" />
<script type="text/javascript" src="/crm/jquery/jquery-1.11.1-min.js"></script>
<script type="text/javascript" src="/crm/jquery/bootstrap_3.3.0/js/bootstrap.min.js"></script>


<link href="jquery/bootstrap-datetimepicker-master/css/bootstrap-datetimepicker.min.css" type="text/css" rel="stylesheet" />
<script type="text/javascript" src="jquery/bootstrap-datetimepicker-master/js/bootstrap-datetimepicker.js"></script>
<script type="text/javascript" src="jquery/bootstrap-datetimepicker-master/locale/bootstrap-datetimepicker.zh-CN.js"></script>

<script type="text/javascript">
	$(function(){
		$("#isCreateTransaction").click(function(){
			if(this.checked){
				$("#create-transaction2").show(200);
			}else{
				$("#create-transaction2").hide(200);
			}
		});
	});
</script>

</head>
<body>
	
	<!-- 搜索市场活动的模态窗口 -->
	<div class="modal fade" id="searchActivityModal" role="dialog" >
		<div class="modal-dialog" role="document" style="width: 90%;">
			<div class="modal-content">
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal">
						<span aria-hidden="true">×</span>
					</button>
					<h4 class="modal-title">搜索市场活动</h4>
				</div>
				<div class="modal-body">
					<div class="btn-group" style="position: relative; top: 18%; left: 8px;">
						  <div class="form-group has-feedback">
						    <input type="text" id="name" class="form-control" style="width: 300px;" placeholder="请输入市场活动名称，支持模糊查询">
						    <span class="glyphicon glyphicon-search form-control-feedback"></span>
						  </div>
					</div>
					<table id="activityTable" class="table table-hover" style="width: 900px; position: relative;top: 10px;">
						<thead>
							<tr style="color: #B3B3B3;">
								<td></td>
								<td>名称</td>
								<td>开始日期</td>
								<td>结束日期</td>
								<td>所有者</td>
								<td></td>
							</tr>
						</thead>
						<tbody id="body">
							<!--<tr>
								<td><input type="radio" name="activity"/></td>
								<td>发传单</td>
								<td>2020-10-10</td>
								<td>2020-10-20</td>
								<td>zhangsan</td>
							</tr>-->
						</tbody>
					</table>
				</div>
				<div class="modal-footer">
					<button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
					<button type="button" class="btn btn-primary" onclick="select()" data-dismiss="modal">确定</button>
				</div>
			</div>
		</div>
	</div>

	<div id="title" class="page-header" style="position: relative; left: 20px;">
		<h4>转换线索 <small id="content"></small></h4>
	</div>
	<div id="create-customer" style="position: relative; left: 40px; height: 35px;">
		新建客户：动力节点
	</div>
	<div id="create-contact" style="position: relative; left: 40px; height: 35px;">
		新建联系人：李四先生
	</div>
	<div id="create-transaction1" style="position: relative; left: 40px; height: 35px; top: 25px;">
		<input type="checkbox" value="0" id="isCreateTransaction"/>
		为客户创建交易
	</div>
	<div id="create-transaction2" style="position: relative; left: 40px; top: 20px; width: 80%; background-color: #F7F7F7; display: none;" >
	
		<form>
		  <div class="form-group" style="width: 400px; position: relative; left: 20px;">
		    <label for="amountOfMoney">金额</label>
		    <input type="text" class="form-control" id="amountOfMoney">
		  </div>
		  <div class="form-group" style="width: 400px;position: relative; left: 20px;">
		    <label for="tradeName">交易名称</label>
		    <input type="text" class="form-control" id="tradeName" >
		  </div>
		  <div class="form-group" style="width: 400px;position: relative; left: 20px;">
		    <label for="expectedClosingDate">预计成交日期</label>
		    <input type="text" class="form-control" id="expectedClosingDate">
		  </div>
		  <div class="form-group" style="width: 400px;position: relative; left: 20px;">
		    <label for="stage">阶段</label>
		    <select id="stage"  class="form-control">
		    	<option th:each="stage : ${#servletContext.getAttribute('data')['stage']}"
				th:text="${stage.text}" th:value="${stage.value}"></option>
		    </select>
		  </div>
		  <div class="form-group" style="width: 400px;position: relative; left: 20px;">
		    <label for="activity">市场活动源&nbsp;&nbsp;<a href="javascript:void(0);" data-toggle="modal" data-target="#searchActivityModal" style="text-decoration: none;"><span class="glyphicon glyphicon-search"></span></a></label>
			  <!--隐藏域，存储选中的市场活动主键-->
			  <input type="hidden" id="id">
		    <input type="text" class="form-control" id="activity" placeholder="点击上面搜索" readonly>
		  </div>
		</form>
		
	</div>
	
	<div id="owner" style="position: relative; left: 40px; height: 35px; top: 50px;">
		记录的所有者：<br>
		<b>zhangsan</b>
	</div>
	<div id="operation" style="position: relative; left: 40px; height: 35px; top: 100px;">
		<input class="btn btn-primary" onclick="convert()" type="button" value="转换">
		&nbsp;&nbsp;&nbsp;&nbsp;
		<input class="btn btn-default" type="button" value="取消">
	</div>
</body>
<script>
	let id = '[[${clueId}]]';
	$.get('/crm/clue/queryById',{'id':id},function (data) {
		//data:Clue
		$('#content').text(data.fullname + data.appellation + "-" +
		data.company);
	},'json');

	//是否发生交易
	$('#isCreateTransaction').click(function (){
		if($(this).prop('checked')){
			//勾中了
			$(this).val("1");
		}else{
			$(this).val("0");
		}
	});

	//线索转换
	function convert(){
		$.post('/crm/clue/convert',{
			'clueId':id,
			'isCreateTransaction':$('#isCreateTransaction').val(),
			//交易数据
			'money':$('#amountOfMoney').val(),//交易金额
			'name':$('#tradeName').val(),//交易名称
			'expectedDate':$('#expectedClosingDate').val(),//期望成交日期
			'stage':$('#stage').val(),//交易阶段
			'activityId':$('#id').val(),//市场活动外键
		},function (data) {
			//data:ResultVo
			if(data.ok){
				alert(data.message);
			}
		},'json');
	}

	//异步查询当前线索已经关联过的市场活动
	$('#name').keypress(function (event) {
		if(event.keyCode == 13){
			$.get('/crm/clue/queryRelatedActivity',{
				'clueId':id,//线索主键
				'name':$('#name').val(),//市场活动名称(模糊)
			},function (data) {
				//data:ResultVo
				$('#body').html('');
				if(!data.ok){
					alert(data.message);
				}else{
					//拼接页面数据
					for (let activity of data.t){
						$('#body').append("<tr>\n" +
								"\t\t\t\t\t\t\t\t<td><input class='son' type=\"radio\" value="+activity.id+" name=\"activity\"/></td>\n" +
								"\t\t\t\t\t\t\t\t<td>"+activity.name+"</td>\n" +
								"\t\t\t\t\t\t\t\t<td>"+activity.startDate+"</td>\n" +
								"\t\t\t\t\t\t\t\t<td>"+activity.endDate+"</td>\n" +
								"\t\t\t\t\t\t\t\t<td>"+activity.owner+"</td>\n" +
								"\t\t\t\t\t\t\t</tr>");
					}
				}
			},'json');
		}
	});

	//选中市场活动
	function select(){
		//获取勾中的son
		let $son = $($('.son:checked')[0]);
		let activityId = $son.val();
		//文本
		let name = $son.parent().next().text();

		$('#activity').val(name);
		$('#id').val(activityId);
	}
</script>
</html>